<template>
	<div class="options-config">
		<el-select v-model="form.displayField" placeholder="请选择" multiple style="width:100%">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
	</div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
@Component({
  name: 'optionsConfig',
  components: {
  }
})
export default class extends Vue {
  @Prop() public form!: any;
  @Prop(Array) public options!: any[];
}
</script>

<style lang="stylus" scoped>
.page-header {
	line-height 53px
	.iconfanhui {
		margin-right 8px
	}
}
.list-item {
	display flex
	align-items center
	margin-bottom 8px
	width 110%
	margin-left -22px
	.field {
		flex-grow 1
		background rgba(0, 0, 0, 0.05)
		border-radius 4px
		padding 8px
		line-height 20px
		display flex
		.field-name {
			flex-grow 1
		}
		.iconfangxiang-you-xian {
			opacity 0.3
			font-size 12px
		}
	}
	.icongengduo-heng {
		font-size 14px
		display block
		padding-bottom 8px
	}
	.icontuodong {
		font-size 14px
		color #8c8c8c
		padding-right 8px
		opacity 0
	}
	&:hover .icontuodong {
		opacity 1
	}
}
.form {
	padding 0 16px
	height 100%
	overflow-y auto
}
</style>
